<template>
  <div class="dialog">
    <el-dialog
      v-loading="loading"
      :visible.sync="dialog"
      title="统计分析"
      width="70%"
      top="35px"
      :close-on-click-modal="false"
      :height="tableHeight"
      :modal="true"
      append-to-body
      @close="doClose"
    >
      <div class="container">
        <div class="search-context">
          <el-row>
            <el-col :span="24">
              <el-card class="box-card">
                <span style="font-weight:bold;">统计说明</span>
                <ol style="line-height:20px;">
                  <li>Avg：UPC-STORE去重数量/门店去重数量</li>
                  <li>新增：本次新增UPC-STORE去重后数量/门店去重数量</li>
                  <li>保留：本次保留UPC-STORE去重后数量/门店去重数量</li>
                  <li>删除：本次删除UPC-STORE去重后数量/门店去重数量</li>
                  <!--<li>替换率：(新增UPC-STORE去重后数量+删除UPC-STORE去重后数量)/上次UPC-STORE去重后数量</li>-->
                  <li>新增百分比：新增UPC-STORE去重后数量/上次UPC-STORE去重后数量</li>
                  <li>删除百分比：删除UPC-STORE去重后数量/上次UPC-STORE去重后数量</li>
                </ol>
              </el-card>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-card class="box-card">
                <el-form ref="editForm" style="width:800px;" :model="oldEntity" :rules="rules" label-width="auto" size="mini">
                  <el-row>
                    <el-col :span="6">
                      <span style="float:left;line-height:38px;">
                        <span style="font-weight:bold;">当前档期：</span>
                        <el-tooltip class="item" effect="dark" placement="bottom">
                          <div slot="content">{{ schedule.scheduleSubject }}</div>
                          <span style="">{{ schedule.scheduleSubject | ellipsis }}</span>
                        </el-tooltip>
                      </span>
                    </el-col>
                    <el-col v-if="type === 1" :span="8">
                      <el-form-item label="采购ID:" prop="buyerIds">
                        <el-select v-model="oldEntity.buyerIds" placeholder="可以多选" disabled multiple style="width: 180px;" size="mini">
                          <el-option v-for="item in buyerIds" :key="item" :label="item" :value="item" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="对比档期:" prop="scheduleId" required>
                        <el-select v-model="oldEntity.scheduleId" size="mini" style="width: 180px;" clearable>
                          <template v-for="item in schedules">
                            <el-option v-if="schedule.id !== item.id && item.scheduleGroup === 1 " :key="item.id" :label="item.scheduleSubject" :value="item.id" />
                          </template>
                        </el-select>
                        <el-button size="mini" type="primary" round @click="toQuery">查询</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="24">
            <el-card class="box-card">
              <div style="margin-bottom:5px;font-weight:bold;">Total：</div>
              <div>
                <el-table
                  class="mytable"
                  :data="totalData"
                  border
                  :header-cell-style="{ height: '0px', padding: '2px' }"
                  :row-style="{height: '0px'}"
                  :cell-style="{padding: '0px'}"
                  style="width: 100%"
                >
                  <el-table-column prop="newCount" align="center" label="上传数量" />
                  <el-table-column prop="newAvg" align="center" label="AVG" />
                  <el-table-column prop="oldCount" align="center" label="上次数量" />
                  <el-table-column prop="newAddCount" align="center" label="新增数量" />
                  <el-table-column prop="newRetainCount" align="center" label="保留数量" />
                  <el-table-column prop="newDeleteCount" align="center" label="删除数量" />
                  <el-table-column prop="newAddPercent" align="center" label="新增百分比" />
                  <el-table-column prop="newDeletePercent" align="center" label="删除百分比" />
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-card class="box-card">
              <div style="margin-bottom:5px;font-weight:bold;">按部门统计：</div>
              <div>
                <el-table
                  class="mytable"
                  :data="deptData"
                  border
                  :header-cell-style="{ height: '0px', padding: '2px' }"
                  :row-style="{height: '0px'}"
                  :cell-style="{padding: '0px'}"
                  style="width: 100%"
                >
                  <el-table-column prop="deptNbr" align="center" label="Dept" />
                  <el-table-column prop="newAvg" align="center" label="Avg" />
                  <el-table-column prop="oldCount" align="center" label="上次数量" />
                  <el-table-column prop="newAddCount" align="center" label="新增数量" />
                  <el-table-column prop="newRetainCount" align="center" label="保留数量" />
                  <el-table-column prop="newDeleteCount" align="center" label="删除数量" />
                  <el-table-column prop="newAddPercent" align="center" label="新增百分比" />
                  <el-table-column prop="newDeletePercent" align="center" label="删除百分比" />
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryListAnalysisData, queryDeptListAnalysisInfo } from '@/api/olm/analysis'

const tipMsg = '请选择档期'
export default {
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 26) {
        return value.slice(0, 26) + '...'
      }
      return value
    }
  },
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      totalData: [],
      deptData: [],
      oldEntity: this.emptyEntity(),
      schedules: [],
      schedule: {},
      buyerIds: [],
      tableHeight: window.innerHeight * 0.85,
      rules: {
        scheduleId: [{ required: true, message: tipMsg, trigger: 'blur' }, { required: true, message: tipMsg, trigger: 'change' }]// ,
        // buyerIds: [{ required: true, message: '请选择采购', trigger: 'blur' }, { required: true, message: '请选择采购', trigger: 'change' }]
      },
      type: '1', // 1:by buyerIds, 2: by scheduleId,
      totalUrl: null,
      deptUrl: null
    }
  },
  methods: {
    emptyEntity() {
      return {
        scheduleId: null,
        buyerIds: []
      }
    },
    toQuery() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.loading = true
          var data = null
          if (this.type === 1) {
            data = { newScheduleId: this.schedule.id, oldScheduleId: this.oldEntity.scheduleId, buyerIdList: this.oldEntity.buyerIds }
            this.loadTotalData(data)
            this.loadDeptData(data)
          } else if (this.type === 2) {
            data = { newScheduleId: this.schedule.id, oldScheduleId: this.oldEntity.scheduleId }
            this.loadTotalData(data)
            this.loadDeptData(data)
          }
        }
      })
    },
    doClose() {
      this.dialog = false
      this.oldEntity = this.emptyEntity()
      this.schedule = {}
      this.buyerIds = []
      this.totalData = []
      this.deptData = []
    },
    loadTotalData(data) {
      console.log(JSON.stringify(data))
      queryListAnalysisData(data, this.totalUrl).then(res => {
        if (res) {
          this.totalData = [res]
        }
        this.loading = false
      }, error => {
        console.log(error)
        this.loading = false
      })
    },
    loadDeptData(data) {
      console.log(JSON.stringify(data))
      queryDeptListAnalysisInfo(data, this.deptUrl).then(res => {
        if (res) {
          this.deptData = res
        }
        this.loading = false
      }, error => {
        console.log(error)
        this.loading = false
      })
    }
  }
}
</script>
<style scoped>
.search-context >>> .el-form-item--mini.el-form-item {
  margin-bottom: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.container >>> .el-card__body {
  padding-bottom: 10px;
  padding-top: 10px;
}
.el-table__empty-text {
  min-height: 30px;
}
.dialog >>>.el-dialog__body{
  padding: 10px 20px;
}
.container >>> .cell{
  user-select: text;
}
</style>

